<style>
#提示 {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  font-size: 20px;
}
</style>
<template>
  <!-- @change是当数值发生改变时执行方法 -->
  <div>
    <!-- {{ obj }} -->
    <el-cascader-panel
      v-model="obj.pca"
      :options="pca"
      :props="{ label: 'name', value: 'name' }"
      @change="findData"
    ></el-cascader-panel>

    <div style="width=100%; margin-top:20px;">
      <div style="width: 50%; float: left">
        <el-form
          ref="form"
          :rules="rules"
          :model="obj"
          label-width="80px"
          class="demo-ruleForm"
        >
          <el-form-item label="确诊" prop="confirmed">
            <el-input v-model="obj.confirmed"></el-input>
          </el-form-item>
          <el-form-item label="疑似" prop="suspected">
            <el-input v-model="obj.suspected"></el-input>
          </el-form-item>
          <el-form-item label="死亡" prop="dead">
            <el-input v-model="obj.dead"></el-input>
          </el-form-item>
          <el-form-item label="治愈" prop="cure">
            <el-input v-model="obj.cure"></el-input>
          </el-form-item>
          <el-form-item label="重症" prop="severe">
            <el-input v-model="obj.severe"></el-input>
          </el-form-item>
          <el-form-item label="境外输入" prop="outside">
            <el-input v-model="obj.outside"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="save">{{ btnTitle }}</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div
        id="提示"
        style="width: 48%; float: right; color: red; font-weight: 800"
      >
        <div>温馨提示：</div>
        <div>1.先选择城市</div>
        <div>2.再录入数据</div>
      </div>
    </div>
  </div>
</template>
<script>
import pca from "../../assets/pca.json";
import moment from "moment";
import { mapActions, mapState } from "vuex";
export default {
  data() {
    var checkNum = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("输入数据不能为空！"));
      } else if (!Number.isInteger(Number(value))) {
        callback(new Error("请输入数字！"));
      }else if(Number(value)<0){
        callback(new Error("输入数据不能为负数！"));
      }
    };
    return {
      rules: {
        confirmed: [{ validator: checkNum, trigger: "blur" }],
        suspected: [{ validator: checkNum, trigger: "blur" }],
        dead: [{ validator: checkNum, trigger: "blur" }],
        cure: [{ validator: checkNum, trigger: "blur" }],
        severe: [{ validator: checkNum, trigger: "blur" }],
        outside: [{ validator: checkNum, trigger: "blur" }],
      },
      pca2: [],
      pca,
      obj: {
        country: "中国",
      },
      btnTitle: "提交",
    };
  },
  computed: {
    //获取dataUpdate的js状态机里获取state
    ...mapState("dataUpdate", ["dataList"]),
  },
  methods: {
    //mapActions用于从dataUpdate的js状态机里获取方法
    ...mapActions("dataUpdate", ["saveOrupdate", "page_query"]),

    //数据查询查询某地区是否录入过数据
    findData(val) {
      this.pca2 = this.obj.pca;
      let params = {
        page: 1,
        pageSize: 10,
        area: val[2],
        inputTime: moment(new Date()).format("YYYY-MM-DD"),
      };
      this.page_query(params).then(() => {
        //判断total是否为0 不是0则有上报过 进行修改操作
        // console.log(params)
        if (this.dataList.total > 0) {
          this.btnTitle = "修改";
          this.obj = this.dataList.list[0];
          this.obj.pca = [
            this.dataList.list[0].province,
            this.dataList.list[0].city,
            this.dataList.list[0].area,
          ];
        } else if (this.dataList.total <= 0) {
          this.btnTitle = "提交";
          this.obj = {};
          this.obj.pca = this.pca2;
          this.obj.country = "中国";
        }
        // console.log(this.dataList.total);
      });
    },

    //数据上报
    save() {
      if (this.obj.pca) {
        this.obj.province = this.obj.pca[0];
        this.obj.city = this.obj.pca[1];
        this.obj.area = this.obj.pca[2];
        // delete this.obj.pca;
      }
      //   console.log(this.obj)
      this.saveOrupdate(this.obj).then((res) => {
        if (res.status == 200) {
          this.$router.push({
            path: "/data_list/table",
          });
          this.$notify({
            title: "成功",
            message: res.message,
            type: "success",
          });
        } else if (res.status == 500) {
          this.$notify({
            title: "错误",
            message: res.message + "输入数据有误！或输入了重复的标题文章！",
            type: "error",
          });
        }
      });
    },
  },
};
</script>






